<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省校联动</title>
</head>
<body>
    <select class="provinces"></select>
    <select class="university"></select>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
        //获取全部的省份
        $.ajax({
            "url": "/getprovinces",
            "type": "GET",
            "dataType": "json"
        }).done(function (data) {
            for (index in data) {
                var province = data[index];
                var opt = $("<option value='" + province.id + "'>" + province.pname + "</option>");
                $(".provinces").append(opt);
            }
            chg();

        }).fail();

        $(".provinces").change(chg);


        function chg() {
            $(".university").empty();
            $.ajax({
                "url": "/getschools",
                "type": "post",
                "data": {"pid": $(".provinces").val()},
                "dataType": "json"
            }).done(function (data) {
                for (index in data) {
                    $(".university").append("<option>"+data[index].name+"</option>");
                }
            });
        }

    </script>
</body>
</html>